<!-- main -->
<div class="row">
  <div class="col-sm-12">
      <div class="box box-primary">
          <div class="box-header with-border">
              <div class="box-title">
                  <button class="btn btn-primary" (click)="toggleModel('addModel')">新增</button>
              </div>
          </div>
          <!-- 搜索框 -->
          <div class="box-header">
              <form class="form-inline">
                  <div class="form-group search-input-R2">
                      <label for="SteacherDepartment">系别</label>
                      <input type="text" id="SteacherDepartment" class="form-control"
                          [(ngModel)]="searchBody.TeacherDepartment" name="SteacherDepartment">
                  </div>
                  <div class="form-group search-input-R2">
                      <label for="SteacherId">工号</label>
                      <input type="text" id="SteacherId" class="form-control"
                          [(ngModel)]="searchBody.TeacherId" name="SteacherId">
                  </div>
                  <div class="form-group search-input-R2">
                      <label for="SteacherName">姓名</label>
                      <input type="text" id="SteacherName" class="form-control"
                          [(ngModel)]="searchBody.TeacherName" name="SteacherName">
                  </div>
                  <div class="form-group search-input-R2">
                      <button type="submit" (click)="getTeacherList(1)" class="btn btn-primary btn-margin-right">查询</button>
                      <button type="submit" (click)="clearSearch()" class="btn btn-warning">重置</button>
                  </div>
              </form>
          </div>
          <!-- table -->
          <div class="box-body table-scroll-content">
              <table class="table table-bordered table-hover table-striped table-keep-line">
                  <thead>
                    <tr>
                        <th>系别</th>
                        <th>工号</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>电话</th>
                        <th>邮箱</th>
                        <th>操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr *ngFor="let teacher of teacherList">
                        <td>{{teacher.TeacherDepartment}}</td>
                        <td>{{teacher.TeacherId}}</td>
                        <td>{{teacher.TeacherName}}</td>
                        <td>{{teacher.TeacherSex}}</td>
                        <td>{{teacher.TeacherNumber}}</td>
                        <td>{{teacher.TeacherEmail}}</td>
                        <td>
                            <button class="btn btn-xs btn-primary" (click)="toggleModel('editModel',teacher)">编辑</button>
                            <button class="btn btn-xs btn-danger" (click)="delTeacher(teacher)">删除</button>
                        </td>
                    </tr>
                  </tbody>
              </table>
          </div>
          <!-- 底部页面跳转 -->
          <div class="box-footer clearfix">
            <p class="pull-left">每页
                <select [(ngModel)]="searchBody.PageSize" (ngModelChange)="getTeacherList(1)" name="pagesize">
                    <option value="10">10</option>
                    <option value="20">20</option>
                    <option value="30">30</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                    <option value="200">200</option>
                </select>个 - 共{{searchBody.Total}}个 - 当前显示第{{searchBody.PageIndex}}页 
            </p>
            <ul class="pagination pagination-sm no-margin pull-right">
                <li (click)="changePage('first',null)"><a>首页</a></li>
                <li (click)="changePage('pre',null)"><a class="fa fa-chevron-left"></a></li>
                <li *ngFor="let item of pages" (click)="changePage('page',item)" [class.active]="searchBody.PageIndex===item"><a>{{item}}</a></li>
                <li (click)="changePage('next',null)"><a class="fa fa-chevron-right"></a></li>
                <li (click)="changePage('last',null)"><a>末页</a></li>
            </ul>
          </div>
       </div>
    </div>
</div>

<!-- 新增模版 -->
<div class="modal fade" id="addModel" tabindex="-1" role="dialog" aria-labelledby="新增">
  <div class="modal-dialog" role="document">
    <div class="modal-content col-sm-12">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">新增</h4>
      </div>
      <div class="modal-body">
        <form class="form-inline" #addForm="ngForm">
          <div class="form-group add-input col-sm-6">
            <label for="AteacherDepartment">系别</label>
            <input type="text" class="form-control" id="AteacherDepartment" placeholder="系别" required
                    [(ngModel)]="addTeacherModel.TeacherDepartment" name="AteacherDepartment">
          </div>
          <div class="form-group add-input col-sm-6">
            <label for="AteacherId">工号</label>
            <input type="text" class="form-control" id="AteacherId" placeholder="导师工号" required
                    [(ngModel)]="addTeacherModel.TeacherId" name="AteacherId">
          </div>
          <div class="form-group add-input col-sm-6">
            <label for="AteacherName">姓名</label>
            <input type="text" class="form-control" id="AteacherName" placeholder="导师姓名" required
                    [(ngModel)]="addTeacherModel.TeacherName" name="AteacherName">
          </div>
          <div class="form-group add-input col-sm-6">
            <label for="AteacherSex">性别</label>
            <input type="text" class="form-control" id="AteacherSex" placeholder="导师性别" required
                    [(ngModel)]="addTeacherModel.TeacherSex" name="AteacherSex">
          </div>
          <div class="form-group add-input col-sm-6">
            <label for="AteacherNumber">电话</label>
            <input type="text" class="form-control" id="AteacherNumber" placeholder="导师电话" required
                    [(ngModel)]="addTeacherModel.TeacherNumber" name="AteacherNumber">
          </div>
          <div class="form-group add-input col-sm-6">
            <label for="AteacherEmail">邮箱</label>
            <input type="text" class="form-control" id="AteacherEmail" placeholder="导师邮箱" required
                    [(ngModel)]="addTeacherModel.TeacherEmail" name="AteacherEmail">
          </div>
        </form>
      </div>
      <div class="modal-footer col-sm-12">
        <button type="button" class="btn btn-warning pull-left" (click)="clearAddModel()">重置</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="submit" class="btn btn-primary" (click)="addTeacher()" [disabled]="!addForm.form.valid">确认</button>
      </div>
    </div>
  </div>
</div>

<!-- 编辑模版 -->
<div class="modal fade" id="editModel" tabindex="-2" role="dialog" aria-labelledby="编辑">
  <div class="modal-dialog" role="document">
      <div class="modal-content col-sm-12">
          <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
              </button>
              <h4 class="modal-title">编辑</h4>
          </div>
          <div class="modal-body">
              <form class="form-inline" #editForm="ngForm">
                  <div class="form-group edit-input col-sm-6">
                      <label for="EteacherDepartment">系别</label>
                      <input type="text" class="form-control" id="EteacherDepartment" placeholder="所属系别" required
                              [(ngModel)]="editTeacherModel.TeacherDepartment" name="EteacherDepartment">
                  </div>
              
                  <div class="form-group edit-input col-sm-6">
                      <label for="EteacherId">工号</label>
                      <input type="text" class="form-control" id="EteacherId" placeholder="导师工号" required
                              [(ngModel)]="editTeacherModel.TeacherId" name="EteacherId">
                  </div>
                  <div class="form-group edit-input col-sm-6">
                      <label for="EteacherName">姓名</label>
                      <input type="text" class="form-control" id="EteacherName" placeholder="导师姓名" required
                              [(ngModel)]="editTeacherModel.TeacherName" name="EteacherName">
                  </div>
                  <div class="form-group edit-input col-sm-6">
                      <label for="EteacherSex">性别</label>
                      <input type="text" class="form-control" id="EteacherSex" placeholder="导师性别" required
                              [(ngModel)]="editTeacherModel.TeacherSex" name="EteacherSex">
                  </div>
                  
                  <div class="form-group edit-input col-sm-6">
                      <label for="EteacherNumber">电话</label>
                      <input type="text" class="form-control" id="EteacherNumber" placeholder="导师电话" required
                              [(ngModel)]="editTeacherModel.TeacherNumber" name="EteacherNumber">
                  </div>

                  <div class="form-group edit-input col-sm-6">
                      <label for="EteacherEmail">邮箱</label>
                      <input type="text" class="form-control" id="EteacherEmail" placeholder="导师邮箱" required
                              [(ngModel)]="editTeacherModel.TeacherEmail" name="EteacherEmail">
                  </div>
       
              </form>
          </div>
          <div class="modal-footer col-sm-12">
              <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
              <button type="submit" class="btn btn-primary" (click)="editTeacher()" [disabled]="!editForm.form.valid">确认</button>
          </div>
      </div>
    </div>
</div>